<template>
    <fieldset>
        <legend>tab切换</legend>
        <button v-for="btn in buttons" :key="btn" :class="['tab-button',{active:btn===selectBtn}]" 
          @click="handleClick(btn)">{{btn}}</button>
        <div class="tab" :is="dynamic">123456</div>

    </fieldset>
</template>

<script>

import emailCom from "./email-com.vue"
import homeCom from "./home-com.vue"
import mineCom from "./mine-com.vue"
// js对象key一定是字符串类型
// 需求
//1.点击按钮,让对应的按钮高亮,编程的思维就是点某个按钮的时候给按钮加上act ive的类名
// is属性切换页面


export default{

    data () {
        return {
            buttons:['email','home','mine'],
            selectBtn:"email"
        }
    },

    methods:{
        handleClick(btn){
            console.log(btn);
            this.selectBtn=btn;
        }
    },
    computed:{
        dynamic(){
            return this.selectBtn + "-com"
        }
    },
    // 注册组件
    components:{
        "email-com":emailCom,
        "home-com":homeCom, 
       "mine-com":mineCom,
      
    },
}


</script>

<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }

    h1 {
        margin: 0;
    }
</style>